<template>
	<view class="com-oh-packbox" v-if="isShowOuHuangInfo">
		<comMask v-model="isShowOuHuangInfo">
			<view class="ou-huang-packbox relative font-hanserif-bold">
				<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/dk-bg.png`" mode=""></image>
				
				<view class="absolute" @click="isShowOuHuangInfo = false" style="right: 30rpx;top:0rpx;">
					<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						style="width:72rpx;height:72rpx;"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-close.png`" mode="">
					</image>
				</view>
				
				<view class="relative" style="width: 100%;height: 182rpx;top: 60rpx;">
					<!-- <view style="text-align: center;color: #FE7000;">欧皇榜</view> -->
					
					<view class="absolute" style="left: 60rpx; top: 50rpx;">
						<view class="relative" style="width: 120rpx;height: 140rpx;z-index: 1;">
							<image class="info-avatar relative" :src="ouHuangInfo.avatar" mode=""></image>
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/mowang-avatar-bg${ouHuangInfo.avatar?'':'-who'}.png`" class="bg"></image>
						</view>
					</view>
				
					<view class="absolute" style="left: 220rpx; top: 60rpx;">
						<view class="relative truncate info-name-txt font-hanserif-bold">
							{{ ouHuangInfo.nickname || '暂无占领' }}
						</view>
						<view class="relative" style="margin-top: 12rpx; width: 240rpx; height: 32rpx; padding-left: 10rpx;color: #FFFFFF; font-size: 22rpx;">
							<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/desc-bg.png`" mode=""></image>
							<view class="relative">已占领<text style="color: #FFFFFF;margin: 0 4rpx;">{{ ouHuangInfo.num_sort_diff || '0' }}</text>发数</view>
						</view>
					</view>
				
					<comBgView v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/play-desc.png`" @click="setShowRuleFun" style="position: absolute; right: 60rpx; top: 42rpx;">
						<view class="flex-align-items-center justify-content-center" style="width: 100rpx;height: 100rpx;"> </view>
					</comBgView>
				</view>
				
				<view class="info-list-name absolute">
					<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/mowang-title.png`" 
						mode=""></image>
					<view class="relative">欧皇榜已结算</view>
				</view>
				
				<scroll-view scroll-y class="info-list-content absolute" @scrolltolower="scrolltolower">
					<view v-if="resLists && resLists.length" class="info-detail relative margin-auto flex-align-items-center" v-for="(item, index) in resLists" :key="index">
						<image class="bg"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/item-bg_UpFront.png`"
							v-if="index === 0" mode=""></image>
						<image class="bg"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/item-bg_UpFront.png`"
							v-else-if="index === 1" mode=""></image>
						<image class="bg"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/item-bg_UpFront.png`"
							v-else-if="index === 2" mode=""></image>
						<image class="bg"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/item-bg.png`"
							mode=""></image>
					
						<view class="info-sort absolute flex-justify-content-center">
							<image class="bg"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
								:src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/item-tag.png`"
								mode=""></image>
							<view class="relative info-sort-txt">{{ item.rank }}</view>
						</view>
					
						<view class="info-head-cover relative flex-all-center">
							<image class="info-head-img" :src="item.avatar" mode=""></image>
							
							<image class="absolute" v-if="item.vip_cover" :src="item.vip_cover" mode="heightFix"
								:style="{
									'z-index': 1,
									'top': '-18rpx',
									'left': '-18rpx',
									'right': 0,
									'margin': 'auto',
									'width': 'auto',
									'height': '114rpx',
									'border-radius': 'unset',
								}"></image>
						</view>
						
						<view class="info-nums flex-direction-column relative">
							<view class="info-nums-title truncate">{{ item.nickname }}</view>
							<view class="info-nums-sum truncate">
								<text>累计</text>
								<text class="info-nums-txt">{{ item.num_sort_diff_total }}发</text>
								<text class="info-nums-txt">{{ item.mowang_earning }}能量</text>
							</view>
						</view>

						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.is_cur_mowang === 1" class="ouhuang-icon absolute" :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/this-round.png`" mode=""></image>
					</view>
					<comEmptyData v-if="resLists && !resLists.length && !isLoading" />
				</scroll-view>
				
				<view class="info-oneself-box flex-align-items-center absolute" v-if="currentOuHuangData && currentOuHuangData.nickname">
					<image class="bg"
						v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
						:src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/self-item-bg.png`"
						mode=""></image>
					
					<view class="oneself-sort relative">
						<view style="padding-left: 24rpx;">排名：</view>
						<view>{{ currentOuHuangData.rank }}</view>
					</view>
					<view class="oneself-detail flex-all-center relative">
						<image class="oneself-detail-cover relative" :src="currentOuHuangData.avatar" mode=""></image>
						<image class="absolute" v-if="currentOuHuangData.vip_cover" :src="currentOuHuangData.vip_cover" mode="heightFix"
							:style="{
								'z-index': 1,
								'top': '-22rpx',
								'left': '-22rpx',
								'right': 0,
								'margin': 'auto',
								'width': 'auto',
								'height': '120rpx',
								'border-radius': 'unset',
							}"></image>
					</view>
					<view class="oneself-content relative">
						<view class="oneself-content-name truncate">{{ currentOuHuangData.nickname }}</view>
						<view class="oneself-content-txt">
							<text>累计</text>
							<text class="oneself-content-sum">{{ currentOuHuangData.num_sort_diff_total }}发</text>
							<text class="oneself-content-sum">{{ currentOuHuangData.mowang_earning }}能量</text>
						</view>
					</view>
				</view>
			</view>
			
			<comRuleUppop 
				type="ouhuang"
				ruleName="欧皇赏说明"
				v-model="isShowRuleUppop" 
				:isShowPoolRuleTxt="false"
				:isShowCheckRuleFlag="isShowCheckRuleFlag" 
				:ruleTypeValue="ruleTypeValue"
				:isNeedReadedClose="true" 
				:isAllowedClickMaskClose="false">
				<template>
					<view v-html="ruleImgTxt"></view>
				</template>
			</comRuleUppop>
			
		</comMask>
	</view>
</template>

<script>
	import paging from '@/inmixed/paging.mixin.js';
	import {
		getContentHomeApi,
		getRewardViewAgreementApi,
		getPoolInfiniteIOuHuangApi,
	} from '@/setupproject/INTERFACE.js';
	
	export default {
		name: "comOuHuangUppop",
		mixins: [paging],
		props: {
			ouHuangInfo: {
				type: Object,
				default: () => {},
			},
			rewardPoolId: {
				type: String,
				default: () => '',
			},
			ouHuangList: {
				type: Object,
				default: () => {},
			},
			value: {
				type: Boolean,
				default: () => false,
			},
		},
		computed: {
			isShowOuHuangInfo: {
				get() {
					return this.value
				},
				set(v) {
					this.$emit('input', v)
				}
			},
			
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			
			currentOuHuangData() {
				if (!this.ouHuangList) return {};
				return this.ouHuangList.cur_info || {};
			},
		},
		watch: {
			isShowOuHuangInfo(v) {
				if(v) {
					this.resListsGetFun();;
				}
			},
		},
		data() {
			return {
				ruleImgTxt: '',
				ruleTypeValue: 54,
				isLoading: false,
				isShowRuleUppop: false,
				isShowCheckRuleFlag: true,
			};
		},
		methods: {
			async setShowRuleFun() {
				const {
					data,
					code
				} = await getContentHomeApi({
					type: this.ruleTypeValue
				});
				
				if (code !== 200) {
					return;
				}
				
				this.isShowRuleUppop = true;
				this.ruleImgTxt = data.content;
			},
			
			/* 需要固定为listsGetFun；以配合 paging.mixin */
			async listsGetFun(e) {
				this.pageInfoObj.page_size = 10;
				
				this.isLoading = true;
				
				const {
					data,
					code
				} = await getPoolInfiniteIOuHuangApi({
					...this.pageInfoObj,
					reward_cur_box_num: 1,
					reward_pool_id: this.rewardPoolId,
				})
				
				this.isLoading = false;
				
				if (code !== 200) return false;
			
				const resLists = data.rank.mowang_rank_list;
				
				/* 返回 到 paging.mixin 处理 */
				return {
					resLists,
					count: data.total
				};
			},
			
		},
	}
</script>

<style lang="scss">
	.ou-huang-packbox {
		width: 670rpx;
		height: 1028rpx;
		margin: 0 auto;
		
		.info-avatar {
			width: 80rpx;
			height: 80rpx;
			left: 0rpx;
			top: 20rpx;
			margin: auto;
			border-radius: 100%;
		}
		
		.info-name-txt {
			max-width: 300rpx;
			font-size: 40rpx;
			color: #FFFFFF;
			background: linear-gradient(0deg, #FFFFFF 0%, #63FFF7 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		
		.info-list-name {
			width: 262rpx;
			height: 48rpx;
			left: 0; 
			right: 0; 
			top: 260rpx; 
			margin: auto;
			text-align: center;
			color: #001762;
			font-size: 24rpx;
			line-height: 48rpx;
		}
		
		.info-list-content {
			width: 650rpx;
			height: 520rpx;
			overflow-y: auto;
			top: 320rpx;
			left: 0;
			right: 0;
			margin: auto;
			
			.info-detail {
				color: #FFFFFF;
				width: 590rpx;
				height: 128rpx;
				padding: 10rpx 24rpx 0;
				margin: 20rpx auto;
				
				.info-sort {
					min-width: 56rpx;
					height: 28rpx;
					font-size: 20rpx;
					left: 0rpx;
					top: 0rpx;
					z-index: 10;
					text-align: center;
					.info-sort-txt {
						// margin-left: -16rpx;
						// line-height: 22rpx;
						color: #FFFFFF;
						line-height: 28rpx;
					}
				}
			
				.info-head-cover {
					width: 78rpx;
					height: 78rpx;
					border-radius: 100%;
					margin: 0 18rpx;
			
					.info-head-img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 100%;
					}
				}
			
				.info-nums {
					color: #FFF;
					margin-left: 20rpx;
					width: 346rpx;
					
					.info-nums-title {
						font-size: 28rpx;
					}
			
					.info-nums-sum {
						margin-top: 10rpx;
						font-size: 20rpx;
						color: #FFFFFF;
						
						.info-nums-txt {
							// margin-left: 22rpx;
							margin-right: 16rpx;
							color: #63FFF7;
						}
					}
				}
				
				.ouhuang-icon {
					width: 152rpx;
					height: 56rpx;
					right: 16rpx;
					top: 40rpx;
				}
			}
		}
		
		.info-oneself-box {
			color: #FFFFFF;
			left: 0;
			right: 0;
			margin: auto;
			bottom: 0rpx;
			height: 158rpx;
			width: 670rpx;
			padding: 0 22rpx;
			
			.oneself-sort {
				font-size: 26rpx;
				width: 120rpx;
				text-align: center;
				margin-top: -46rpx;
			}
			
			.oneself-detail {
				width: 78rpx;
				height: 78rpx;
				margin: 0 46rpx 0 20rpx;
				border-radius: 100%;
				margin-top: -46rpx;
				.oneself-detail-cover {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
				}
			}
			
			.oneself-content {
				width: 400rpx;
				margin-top: -46rpx;
				.oneself-content-name {
					font-size: 32rpx;
					color: #FFFFFF;
				}
				
				.oneself-content-txt {
					margin-top: 10rpx;
					font-size: 24rpx;
					.oneself-content-sum {
						color: #63FFF7;
					}
					.oneself-content-sum + .oneself-content-sum {
						margin-left: 18rpx;
					}
				}
			}
		}
	}
</style>
